import uniqueId from '@form-create/utils/lib/unique';
import {localeProps} from '../../utils';

const label = '栅格';
const name = 'jd-row';

export default {
    icon: 'icon-grid',
    label,
    name,
    mask: false,
    rule() {
        return {
            type: 'FcRow',
            props: { },
            children: []
        };
    },
    children: 'jd-col',
    childrenLen: 2,
    watch: {
        'type': function(val) {
            if (val.value == 'flex'){
                val.api.rule[2].hidden = false;
                val.api.rule[3].hidden = false;
            } else {
                val.api.rule[2].hidden = true;
                val.api.rule[3].hidden = true;
            }
        }
    },
    props(_, {t}) {
        return localeProps(t, name + '.props', [{
                type: 'inputNumber',
                field: 'gutter',
                title: '栅格间隔',
                value: 15,
                props: {min: 0}
            }, 
            {
                type: 'switch',
                field: 'type',
                title: '弹性布局',
                props: {activeValue: 'flex', inactiveValue: 'default'}
            }, 
            {
                type: 'select',
                field: 'justify',
                title: '水平排列',
                hidden: true,
                value: 'start',
                options: [{label: '靠左对齐', value: 'start'}, 
                    {label: '靠右对齐', value: 'end'}, 
                    {label: '居中对齐',value: 'center'}, 
                    {label: '分散对齐', value: 'space-around'}, 
                    {label: '两端对齐', value: 'space-between'}]
            }, 
            {
                type: 'select',
                field: 'align',
                title: '垂直排列',
                hidden: true,
                value: 'middle',
                options: [{label: '头部对齐', value: 'top'}, 
                    {label: '垂直居中', value: 'middle'}, 
                    {label: '底部对齐',value: 'bottom'}]
            }]);
    }
};
